<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="css/comment.css" type="text/css"/>

<body>

<div id="main-div">
    <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                <img src="img/login.jpg" alt="Angers">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>Example page header
                    <small>Subtext for header</small>
                </h1>
            </div>
            <div class="admin-center">
                <img src="http://ZHA-ITA077-w7/${customer.avatar}" alt="..." class="img-rounded" height="70" width="70">
                <!-- Split button -->
                <div class="btn-group user-center-btn-group">
                    <button type="button" class="btn btn-primary btn-lg">UserName</button>
                    <button type="button" class="btn btn-primary btn-lg dropdown-toggle  " data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">UserCenter</a></li>
                        <li><a href="#">AddressManager</a></li>
                        <li><a href="#">Change Avater</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Log Out</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
            <!--选项栏-->
            <div class="console-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li crole="presentation" class="menu-li active"><a href="merchantList.jsp">HomePage</a></li>
                    <li role="presentation" class="menu-li"><a href="orderList.jsp">Orger Page</a></li>
                </ul>
            </div>
        </div>
        <div class="operationarea">
            <div id="show-order-item-area">
                <div class="container" style="margin-top: 100px">

                    <div class="panel panel-primary">
                        <div class="panel-heading">订单详情</div>
                        <div class="panel-body">
                            <div style="margin-bottom: 10px">
                                <span>订单号:${order.processNumber }</span>
                                <span style="float: right">订单状态:<span style="color: red; font-weight: bold">${order.status }</span></span>
                            </div>

                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>食物名字</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                </tr>

                                </thead>
                                <tbody id="tbody">
                                <c:forEach var="it" items="${orderItemList }">
                                    <tr>
                                        <td>${it.name }</td>
                                        <td>${it.price }</td>
                                        <td>${it.amount }</td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <div style="float:right;">
                            <c:if test="${order.status == 'DELIVER'}">
                                <button class="btn btn-primary" id="determineReceiptBtn">确定收货</button>
                            </c:if>
                                <c:if test="${order.status == 'SUCCESS'}">
                                    <c:if test="${fn:length(order.comment) == 0}">
                                        <span><button class="btn btn-primary" id="${order.id }">评论</button></span>
                                    </c:if>
                                    <c:if test="${order.complaint == null}">
                                        <span><button class="btn btn-danger" id="${order.id }">投诉</button></span>
                                    </c:if>
                                </c:if>
                            </div>
                        </div>
                    </div>

                    <div id="star" style="display:none;">
                        <h1 class="glyphicon glyphicon-star" aria-hidden="true" id="1"></h1>
                        <h1 class="glyphicon glyphicon-star" aria-hidden="true" id="2"></h1>
                        <h1 class="glyphicon glyphicon-star" aria-hidden="true" id="3"></h1>
                        <h1 class="glyphicon glyphicon-star" aria-hidden="true" id="4"></h1>
                        <h1 class="glyphicon glyphicon-star" aria-hidden="true" id="5"></h1>
                        <p id="1" class="comment"></p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改客户信息</h4>
            </div>
            <div class="modal-body" id="modal_body">
            </div>
            <div class="modal-footer" id="myConfirm">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="sure">确定</button>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/star.js"></script>
<script type="text/javascript" src="js/urlUtil.js"></script>
<script type="text/javascript" src="js/orderItem.js"></script>
</html>
